<template>
  <div class="message01-box layout-box">
    <div class="layout-box-header">
      <i class="icon-layout-box-title" />
      提示信息
    </div>

    <div class="layout-box-content">

      <el-row class="mt10">
        <el-button :plain="true" @click="open1">消息</el-button>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open3">警告</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>
      </el-row>

      <el-row class="mt10">
        <el-button :plain="true" @click="openCenter">文字居中</el-button>
      </el-row>

      <el-row class="mt10">
        <el-button :plain="true" @click="openVn">自行创建需要的虚拟dom节点</el-button>
      </el-row>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Message01',
  props: {},
  data() {
    return {}
  },
  computed: {},
  mounted() {

  },
  methods: {
    open1() {
      this.$message('这是一条消息提示')
    },
    open2() {
      // this.$message({
      //   message: '恭喜你，这是一条成功消息',
      //   type: 'success'
      // });
      this.$message.success('恭喜你，这是一条成功消息')
    },
    open3() {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      })
    },
    open4() {
      this.$message.error('错了哦，这是一条错误消息')
    },
    openCenter() {
      this.$message({
        message: '居中的文字',
        center: true
      })
    },
    openVn() {
      // 自行创建需要的虚拟dom节点
      const h = this.$createElement
      this.$message({
        message: h('p', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ])
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
